<template>
	<view>
		<u--form>
			<u-form-item label="商品名称" prop="goodsInfo.name" borderBottom ref="item1">
				<u--input placeholder="请输入名称" border="surround" v-model="goodsInfo.goodsName">
				</u--input>
			</u-form-item>
			<u-form-item label="价格" prop="goodsInfo.price" borderBottom ref="item1">
				<u--input type='number' maxlength='12' placeholder="请输入价格(¥)" border="surround"
					v-model="goodsInfo.goodsPrice">
				</u--input>
			</u-form-item>
			<u-form-item label="类型" prop="userInfo.type" borderBottom ref="item1">
				<u-radio-group v-model="ctype" placement="row" @change="groupChange">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in types" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item labelWidth='40' label="商品图片" prop="userInfo.goodsImage" borderBottom ref="goodsimage">
				<u-upload :previewFullImage="true" :fileList="goodsInfo.goodsImageUrl" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="1">
				</u-upload>
			</u-form-item>
			<u-form-item label="商品简介" prop="userInfo.goodsDescription" borderBottom ref="item1">
				<u--textarea count maxlength=' 200' v-model="goodsInfo.goodsDescription" placeholder="请输入内容" autoHeight>
				</u--textarea>
			</u-form-item>
			<u-button @click="submit" class="submit" text="提交"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
			</u-button>
			<u-toast ref="uToast"></u-toast>

		</u--form>
	</view>
</template>

<script>
	import {
		addGoods
	} from '@/config/api.js'
	export default {
		data() {
			return {
				currentUser: {
					name: '12345',
					token: '123456'
				},
				goodsInfo: {
					goodsType: '玩具',
					goodsName: '',
					goodsPrice: 0,
					goodsDescription: '',
					goodsImageUrl: [{
						url: 'https://edu-zsj-1010.oss-cn-beijing.aliyuncs.com/2022/04/30/goods/shop.png'
					}],
				},
				types: [{
						name: '玩具',
						disabled: false
					},
					{
						name: '书籍',
						disabled: false
					},
					{
						name: '食物',
						disabled: false
					}, {
						name: '电子',
						disabled: false
					}, {
						name: '其它',
						disabled: false
					}

				],
				ctype: '玩具'
			}
		},
		onLoad() {
			let name = '';
			let token = '';
			uni.getStorage({
				key: 'user_name',
				success: function(res) {
					name = res.data
					// console.log(name)
				}
			})

			uni.getStorage({
				key: 'user_token',
				success: function(res) {
					token = res.data
					// console.log(token)
				}
			})
			this.currentUser.name = name;
			this.currentUser.token = token;
			// console.log('--------');
			// console.log(this.currentUser.name);
			// console.log(this.currentUser.token);
		},
		methods: {
			groupChange(n) {
				// console.log('groupChange', n);
			},
			radioChange(n) {
				this.goodsInfo.goodsType = n;
				console.log('上传的当前用户为:' + this.currentUser.name);
				console.log('上传的商品类型为:' + this.goodsInfo.goodsType);
				console.log('上传的名称为:' + this.goodsInfo.goodsName);
				console.log('上传的价格为:' + this.goodsInfo.goodsPrice);
				console.log('上传的简介为:' + this.goodsInfo.goodsDescription);
				console.log('上传的图片url为:' + this.goodsInfo.goodsImageUrl.url);
			},
			//删除图片
			deletePic(event) {
				this.goodsInfo.goodsImageUrl.splice(event.index, 1)
			},

			//添加图片
			async afterRead(event) {
				let img = [].concat(event.file)
				let fileListen = this.goodsInfo.goodsImageUrl.length
				img.map((item) => {
					this.goodsInfo.goodsImageUrl.push({
						item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < img.length; i++) {
					const result = await this.uploadFilePromise(img[i].url)
					let item = this.goodsInfo.goodsImageUrl[fileListen]
					this.goodsInfo.goodsImageUrl.splice(fileListen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost:8080/upload/fileoss/upGoodsImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							let data = JSON.parse(res.data);
							console.log(data.data);
							console.log(data.data.url);
							this.goodsInfo.goodsImageUrl.url = data.data.url
							console.log(this.goodsInfo.goodsImageUrl.url)
						}
					});
				})
			},
			submit() {
				//判断输入，除了简介可以为空，其它都不能为空 todo
				if (this.goodsInfo.goodsName == '' || this.goodsInfo.goodsPrice == null) {
					uni.$u.toast("商品名字或商品价格不能为空")
				} else {
					// uni.$u.toast("你没有权限哦")
					addGoods({
						goodsBelongToUser: this.currentUser.name,
						goodsDescription: this.goodsInfo.goodsDescription,
						goodsImage: this.goodsInfo.goodsImageUrl.url,
						goodsName: this.goodsInfo.goodsName,
						goodsPrice: this.goodsInfo.goodsPrice,
						goodsType: this.goodsInfo.goodsType

					}, {
						params: {
							token: this.currentUser.token,
						}
					}).then(res => {
						console.log(res.data);
						uni.$u.toast("成功上传，商品名为" + res.data.goodsName);
						this.goodsInfo.goodsName = ''
						this.goodsInfo.goodsImageUrl.url = ''
						this.goodsInfo.goodsPrice = 0
					}).catch(() => {

					})
				}

			},

		}
	}
</script>

<style>
	.item_big_height {
		height: 100px;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.submit {
		margin-top: 20px;
		padding: auto;
	}
</style>
